<template>
	<view class="addaddress">
		<view class="top" @click="back()" >
			<uni-icons @click="back()" class="back" type="back" size="30"></uni-icons>
			<view>编辑地址</view>
		</view>
		<view class="add">
			<view class="name row">
				<view>联系人</view>
				<input type="text" v-model="username" placeholder="请填写姓名" placeholder-style="color:#CCCCCC;">
				<view v-for="(item, index) in allsex" :key="index" class="rowbtn">
					<view :class="[sexid == index ? 'active' : 'select']" @click="choseItem(index)">
						<text class="grid-text" >{{ item.sex }}</text>
					</view>
				</view>
			</view>
			<view class="phone row">
				<view>手机号码 </view>
				<input type="text"  v-model="phone" placeholder="请填写手机号" placeholder-style="color:#CCCCCC;">
			</view>
			<view class="address row">
				<view>送餐地址</view>
				<view>{{address}}</view>
				<uni-icons type="right" size="30" @click="toshppingAddress()"></uni-icons>
			</view>
			<view class="door row">
				<view>门牌号</view>
				<input type="text" v-model="doorNumber" placeholder="街道/楼牌号等" placeholder-style="color:#CCCCCC;">
			</view>
			<view class="tab row">
				<view>标签</view>
				<view class="tabbtn">
					<view v-for="(item, tindex) in tab" :key="tindex" class="tabrow">
						<view :class="[tid == tindex ? 'active' : 'select']" @click="tchoseItem(tindex)">
							<text class="grid-text" >{{ item.position }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button @click="redit()">保存</button>
			<button @click="delect()">删除</button>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				state:'0',
				allsex: [
					{
						isSelected: false,
						sex: '先生'
					},
					{
						isSelected: false,
						sex: '女士'
					}
				],
				sexid: '0', 
				tab:[
					{
						isSelected: false,
						position: '家'
					},
					{
						isSelected: false,
						position: '公司'
					},
					{
						isSelected: false,
						position: '学校'
					}
				],
				tid:'0',
				locationid:'',
				username:'',
				phone:'',
				address:'点击选择收货地址',
				doorNumber:'',
				addressStyle: '家',
				sex:'先生',
				name:'',
				addressju:'111'
			}
		},
		methods: {
			back(){
				let pages = getCurrentPages();
				console.log(pages);
				let backPages = pages.length - 1;
				uni.navigateBack({
					delta:backPages,
				})
			},
			choseItem: function(index) {
				console.log(index)
				this.sexid = index;
				this.sex = this.allsex[this.sexid].sex;
				console.log(this.sex);
			},
			tchoseItem: function(tindex) {
				console.log(tindex)
				this.tid = tindex;
				this.addressStyle = this.tab[this.tid].position;
				console.log(this.addressStyle);
			},
			toshppingAddress(){
				uni.navigateTo({
					url:"/pages/shioppingaddress/shioppingaddress?page=1"
				})
			},
			// back(){
			// 	uni.navigateBack({})
			// },
			delect(){
				uni.showModal({
					content:"确定删除当前地址吗？",
					confirmColor:'#f77214',
					cancelColor:'#f77214',
					success:(res)=>{
						console.log(res);
						if(res.confirm){//点删除了
							http({
								url:'/delectaddress',
								method:'post',
								data:{
									locationid:this.locationid
								},
								success:(res)=>{
									console.log(res)
									if(res.data.msg=='删除成功'){
										uni.showToast({
											title:'删除成功',
											icon:'success'
										})
										this.get();
									}else{
										// console.log(res);
										uni.showToast({
											title:'删除失败',
											icon:'error'
										})
									}
								}
							})
						}
					}
				})				
			},
			redit(){
				console.log(this.address);
				http({
					url:'/editaddress',
					method:'post',
					data:{
						locationid:this.locationid,
						username:this.username,
						phone:this.phone,
						address:this.address,
						houseNum:this.doorNumber,
						label:this.addressStyle,
						sex:this.sex,
					},
					success:(res)=>{
						console.log(res);
						if(res.data.msg=='修改成功'){
							uni.showToast({
								title:'修改成功',
								icon:'success'
							})
						}else{
							uni.showToast({
								title:'修改失败',
								icon:'error'
							})
						}
					}
				})
			},
			// getAddress(){
			// 	let address = uni.getStorageSync('address');
			// 	console.log(address);
			// 	this.address = address;
			// }
			// getid(){
			// 	var that = this;
			// 	uni.getStorage({
			// 		key:'locationid',
			// 		success(res){
			// 			console.log(res.data);
			// 			that.locationid = res.data.locationid;
			// 		}
			// 	});
			// },
		},
		onLoad: function (option) {
			this.locationid = uni.getStorageSync('locationid').locationid
			console.log(this.locationid);
			http({
				url:'/selidloction',
				method:'post',
				data:{
					locationid:this.locationid,
				},
				success: (res) => {
					console.log(res);
					console.log(res.data[0]);
					this.username = res.data[0].name;
					this.phone = res.data[0].phone;
					this.address = res.data[0].address
					this.doorNumber = res.data[0].houseNum;
					this.addressStyle = res.data[0].label;
					this.sex = res.data[0].sex;
					// console.log(this.sex);
					console.log(this.addressStyle);
					console.log(this.address);
					console.log(this.address2);
					if(this.address2 != undefined){
						this.address = this.address2;
					}else if(this.address2 == undefined){
						this.address = res.data[0].address;
					}
					// if((this.address2 == ''){
					// 	this.address = res.data[0].address;
					// }
					if(this.sex == '女士'){
						this.sexid='1';
					}
					if(this.addressStyle == '公司'){
						this.tid='1';
					}else if(this.addressStyle == '学校'){
						this.tid='2'
					}else{
						this.tid='0';
					}
				}
			})
			console.log(option);
			this.address = option.address;
			this.address2 = option.address;
			console.log(this.address);
			console.log(this.address2);
			
		},
		onShow(){
			// this.getid();
			// this.locationid = uni.getStorageSync('locationid').locationid
			// console.log(this.locationid);
			// http({
			// 	url:'/selidloction',
			// 	method:'post',
			// 	data:{
			// 		locationid:this.locationid,
			// 	},
			// 	success: (res) => {
			// 		console.log(res);
			// 		console.log(res.data[0]);
			// 		this.username = res.data[0].name;
			// 		this.phone = res.data[0].phone;
			// 		if(this.address == res.data[0].address ||this.address == '点击选择收货地址'){
			// 			this.address = res.data[0].address
			// 		}else{
			// 			this.address = this.address;
			// 		}
			// 		// console.log(this.address);
			// 		this.address = res.data[0].address;
			// 		this.doorNumber = res.data[0].houseNum;
			// 		this.addressStyle = res.data[0].label;
			// 		this.sex = res.data[0].sex;
			// 		// console.log(this.sex);
			// 		// console.log(this.addressStyle);
			// 		if(this.sex == '女士'){
			// 			this.sexid='1';
			// 		}
			// 		if(this.addressStyle == '公司'){
			// 			this.tid='1';
			// 		}else if(this.addressStyle == '学校'){
			// 			this.tid='2'
			// 		}else{
			// 			this.tid='0';
			// 		}
			// 	}
			// })
		},
		
	}
</script>

<style>
page{
	background-color: #F2F2F2;
}
.top{
	padding-top: 60rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	background-color: #ffffff;
	border-bottom: #F2F2F2 solid 1rpx;
}
.top>.back{
	position: absolute;
	left: 0;
	zoom: 0.8;
}
.add .row{
	display: flex;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 25rpx;
	background-color: #ffffff;
	border-bottom: #F2F2F2 1rpx solid;
}
.add .row view:nth-child(1){
	margin-left: 30rpx;
}
.add .name view:nth-child(1){
	margin-right: 35rpx;
}
.add .row input{
	width: 240rpx;
	margin: 30rpx;
}
.add .address view:nth-child(1){
	margin-right: 30rpx;
}
.add .address view:nth-child(2){
	color: #CCCCCC;
}
.add .address uni-icons{
	position: absolute;
	right: 50rpx;
	zoom: 0.5;
}
.add .door view:nth-child(1){
	margin-right: 20rpx;
}
.add .tab .tabbtn{
	display: flex;
}
.btn{
	height: 140rpx;
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	display: flex;
}
.btn button{
	width: 330rpx;
	height: 80rpx;
	background-color: #f77214;
	color: #ffffff;
	font-size: 30rpx;
	margin-top: 20rpx;
	border-radius: 50rpx;
}
.btn button:nth-child(2){
	background-color: #ffffff;
	border: #f77214 1rpx solid;
	color: #f77214;
	font-size: 30rpx;
	margin-top: 20rpx;
	border-radius: 50rpx;
}
.row .active {
	width: 120rpx;
	height: 60rpx;
	line-height: 66rpx;
	margin-top: 10rpx;
	border-radius: 50rpx;
	background-color: #fff0e9;
	border-width: 2rpx;
	border-style: solid;
	border-color: #fff0e9;
	color: #ff5c18;
	font-size: 25rpx;
}
.row .select {
	width: 120rpx;
	height: 60rpx;
	line-height: 66rpx;
	margin-top: 10rpx;
	border-radius: 50rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #f0f3f7;
	color: #999999;
	background-color: #f0f3f7;
	font-size: 25rpx;
}
.rowbtn{
	width: 140rpx;
}
.rowbtn view text{
	margin-left: 35rpx;
}
.tabrow view {
	text-align: center;
}
.tabrow{
	width: 150rpx;
	padding-left: 10rpx;
}
</style>
